import React from "react"
import { View, Image, ITouchEvent } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { LikeOutlined, Like } from "@taroify/icons"
import { pageMapperCommunity } from "@/constants/pageMap"
import { navigation } from "@/utils/router"
import clsx from "clsx"
import { noteLikeSwitch } from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"
import Icon from "@/components/GpFontIcon"
import { ContentNoteAttachmentType } from "@/types/enum"

type IProps = {
  className?: string
  note: IApiRelative.IGetTopicRelatedNotes.ITopicRelatedNote
  /** 点赞成功后回调 */
  onLike(noteId: number, meta: IApiRelative.INoteLikeSwitch.IResData): void
  /** 跳转来源
   * @description "worddetail" 话题详情
   */
  from?: "worddetail"
  /** 话题id, 当是话题详情页面时需要传入 */
  topicId?: string
}
/**
 * @component 话题下笔记显示/更多话题回答
 */
export default function NoteAnswer({ note, className, onLike, from, topicId }: IProps) {
  function handleLike(ev: ITouchEvent) {
    ev.stopPropagation()
    noteLikeSwitch({
      id: note.id
    }).then(res => {
      if (requestIsFullfilled(res)) {
        Taro.showToast({
          title: note.isSelfLike ? "已取消点赞" : "点赞成功",
          icon: "none"
        })
        onLike(note.id, res.data.data)
      }
    })
  }
  function handleNoteNavigation() {
    if (note.fileType === ContentNoteAttachmentType.Image) {
      navigation(pageMapperCommunity.NoteDetail, { id: note.id, from, topicId })
    } else if (note.fileType === ContentNoteAttachmentType.Video) {
      navigation(pageMapperCommunity.VideoNoteDetail, { id: note.id })
    }
  }
  return (
    <View className={clsx("bg-white box-border pb-32px", className)} onClick={handleNoteNavigation}>
      <View className="flex flex-row items-center gap-8px box-border">
        <Image
          src={note.createdByHead as string}
          className="object-cover block w-64px h-64px rounded-full"
        />
        <View className="flex flex-col justify-between box-border gap-8px">
          <View className="text-bold text-28px">{note.createdByName}</View>
          <View className="text-light text-24px">{note.followerCount}人关注</View>
        </View>
      </View>
      {note.title && (
        <View className="text-bold text-32px font-600 leading-42px mt-34px mb-24px unknowfield">
          {note.title}
        </View>
      )}
      {note.description && (
        <View
          className={clsx("text-bold text-28px leading-40px ellipse_2", {
            "mt-34px": !note.title
          })}
        >
          {note.description}
        </View>
      )}
      {note.thumbnail && (
        <View className="mt-16px">
          <Image
            src={note.thumbnail}
            className="w-202px h-202px box-border block rounded-16px"
            mode="aspectFill"
          />
        </View>
      )}
      <View className="text-28px text-light flex flex-row items-center gap-32px mt-34px">
        <View className="flex flex-row items-center gap-8px">
          <Icon icon="icon-huatipinglun1" color="#999999" size={32} />
          {note.commentCount}
        </View>
        <View className="flex flex-row items-center gap-8px">
          {note.isSelfLike ? (
            <Like size={16} onClick={handleLike} color="#FA3F29" />
          ) : (
            <LikeOutlined size={16} onClick={handleLike} color="#999999" />
          )}
          {note.likeCount}
        </View>
      </View>
      {/* 评论区 */}
      {note.comments && note.comments.length > 0 && (
        <View className="bg-page rounded-8px box-border p-24px flex flex-col gap-12px mt-34px">
          {note.comments.map(item => (
            <View className="box-border" key={item.id}>
              <View className="inline text-bold font-500 text-26px">{item.miniVisitorName}：</View>
              <View className="inline text-light text-26px">{item.content}</View>
            </View>
          ))}
        </View>
      )}
    </View>
  )
}
